import {Component, Input, OnInit} from '@angular/core';
import {Hero} from "../Hero";
import {ActivatedRoute} from '@angular/router';
import {Location} from '@angular/common';

import {HeroService} from '../hero.service';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
  @Input() hero?: Hero

  constructor(
    /**
     * ActivatedRoute 保存着到这个 HeroDetailComponent 实例的路由信息
     * 这个组件对从 URL 中提取的路由参数其中的 id
     * 参数就是要显示的英雄的 id。
     */
    private route: ActivatedRoute,
    /**
     * HeroService 从远端服务器获取英雄数据
     * 本组件将使用它来获取要显示的英雄。
     */
    private heroService: HeroService,
    /**
     * location 是一个 Angular 的服务，用来与浏览器打交道
     * 使用它来导航回上一个视图
     */
    private location: Location
  ) {
  }


  ngOnInit(): void {
  this.getHero()
  }

  /**
   * this.route.snapshot 是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后
   * paramMap 是一个从 URL 中提取的路由参数值的字典。"id" 对应的值就是要获取的英雄的 id
   */
  getHero(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    console.log(id)
    this.heroService.getHero(id)
      .subscribe(hero => this.hero = hero);
  }
  // 回到原路
  goBack(): void {
    this.location.back();
  }


  save(): void {
    if (this.hero) {
      this.heroService.updateHero(this.hero)
        .subscribe(() => this.goBack());
    }
  }



  //   hero 属性必须是一个带有 @Input() 装饰器的输入属性
  //   因为外部的 HeroesComponent 组件将会绑定到它。就像这样
  //   <app-hero-detail [hero]="selectedHero"></app-hero-detail>
  //   这就是你要对 HeroDetailComponent 类做的唯一一项修改。
  //   没有其它属性，也没有展示逻辑。
  //   这个组件所做的只是通过 hero 属性接收一个英雄对象，并显示它


}
